<template>
	<div>
		<div v-for="(domain, kk) in value" :key="kk" class="formitems">
			<el-input v-show="false" v-model="domain._id" class="item-input" :label="'1参数' + kk"
				:prop="'domains.' + kk + '._id'" placeholder="请输入参数1" />
			<el-input v-model="domain.name" class="item-input" :label="'1参数' + kk" :prop="'domains.' + kk + '.name'"
				placeholder="请输入内容名称" :rules="{
          required: true, message: '参数不能为空', trigger: 'blur'
        }" />
			<el-date-picker type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="timestamp"
				v-model="domain.completed_at" class="item-input" :prop="'domains.' + kk + '.completed_at'" />
			</el-date-picker>
			<el-button @click.prevent="removeItem(domain)"><i class="el-icon-delete" /></el-button>
		</div>
		<el-button @click="addItem">新增</el-button>
	</div>
</template>
<script>
	import {
		v4 as uuidv4
	} from 'uuid';
	export default {
		props: {
			value: {
				type: Array,
				default: function() {
					return [{
						id: uuidv4(),
						name: '',
						completed_at: ''
					}]
				}
			}
		},
		data() {
			return {
				domains: [{
					id: uuidv4(),
					name: '',
					completed_at: ''
				}]
			}
		},
		watch: {
			domains: {
				handler(newVal, oldVal) {
					console.log(newVal)
					this.$emit('input', JSON.stringify(newVal))
				},
				deep: true
			}
		},
		methods: {
			removeItem(item) {
				var index = this.value.indexOf(item)
				if (index !== -1) {
					this.value.splice(index, 1)
				}
			},
			addItem() {
				this.value.push({
					_id: uuidv4(),
					name: '',
					completed_at: ''
				})
			}
		}
	}
</script>
<style>
	.formitems {
		margin-bottom: 15px;
	}

	.item-input {
		width: 200px;
	}
</style>
